<template>
  <Card>
    <p slot="title">发布文章</p>
    <Row :gutter="14">
      <Form :model="article" :label-width="80" :rules="ruleValidate" ref="article">
        <Col span="24" :lg="16">
          <FormItem label="标题：" prop="title">
            <Input v-model="article.title" placeholder="请输入标题..."></Input>
          </FormItem>
          <FormItem label="摘要：" prop="summary">
            <Row>
              <Col span="16">
                <Input v-model="article.summary" type="textarea" :autosize="{minRows: 4,maxRows: 5}"
                       placeholder="请输入文章摘要..."></Input>
              </Col>
              <Col span="8">
                <div style="position: relative">
                  <Upload style="position: absolute;z-index: 2;width: 100%;background-size: contain;background: url('http://pics.sc.chinaz.com/files/pic/pic9/201908/zzpic19616.jpg') no-repeat;"
                    v-model="article.cover"
                    multiple
                    type="drag"
                    :show-upload-list="false"
                    :format="['jpg','jpeg','png']"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :on-format-error="handleFormatError"
                    action="http://www.baidu.com">
                    <div style="padding: 3px 0">
                      <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                      <p>点击或拖拽上传封面</p>
                    </div>
                  </Upload>
                </div>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="内容：" prop="propContent">
            <div>
              <editor ref="editor" :value="article.content" @on-change="handleChange"/>
              <Input v-model="article.propContent" type="textarea" :autosize="{minRows: 1,maxRows: 1}"
                     placeholder=""></Input>
            </div>
          </FormItem>
        </Col>
        <Col span="24" :lg="8">
          <Divider orientation="left" class="divider">标签</Divider>
          <div class="divider-body">
            <FormItem prop="label" class="my-form-item">
              <CheckboxGroup v-model="article.label">
                <Checkbox v-for="info in label" :label="info.id">
                  <span>{{ info.name }}</span>
                </Checkbox>
              </CheckboxGroup>
            </FormItem>
          </div>
          <Divider orientation="left" class="divider">分类</Divider>
          <div class="divider-body">
            <FormItem prop="classify" class="my-form-item">
              <CheckboxGroup v-model="article.classify">
                <Checkbox v-for="info in classify" :label="info.id">
                  <span>{{ info.name }}</span>
                </Checkbox>
              </CheckboxGroup>
            </FormItem>
          </div>
          <Divider orientation="left" class="divider">其他</Divider>
          <div class="divider-body">
            <i-switch :value="true" size="large" style="margin-right: 8px" @on-change="changeDisplay">
              <span slot="open">可见</span>
              <span slot="close">隐藏</span>
            </i-switch>
            <i-switch size="large" @on-change="changeTop">
              <span slot="open" :value="true">顶置</span>
              <span slot="close">不顶置</span>
            </i-switch>
          </div>
          <br>
          <div>
            <Button type="primary" v-on:click="handleSubmit('article')">确认发布</Button>
            <Button style="margin-left: 8px">预览</Button>
          </div>
        </Col>
      </Form>
    </Row>
  </Card>
</template>
<script>
    import Editor from '_c/editor'

    export default {
        name: 'pub_article',
        components: {
            Editor
        },
        data() {
            return {
                article: {
                    title: '',
                    summary: '',
                    cover: '',
                    content: '',
                    propContent: '',
                    label: [2, 4],
                    classify: [1, 2],
                    display: 1,
                    top: 1
                },
                label: [{
                    id: 1,
                    name: 'Spring Boot'
                }, {
                    id: 2,
                    name: 'Java'
                }, {
                    id: 3,
                    name: 'Nginx'
                }, {
                    id: 4,
                    name: 'Redis'
                }],
                classify: [{
                    id: 1,
                    name: '学习笔记'
                }, {
                    id: 2,
                    name: '公共资源'
                }, {
                    id: 3,
                    name: '工作生活'
                }],
                ruleValidate: {
                    title: [
                        {required: true, message: '请输入文章标题', trigger: 'blur'}
                    ],
                    summary: [
                        {required: true, message: '请输入文章摘要', trigger: 'blur'}
                    ],
                    propContent: [
                        {required: true, message: '请输入文章内容', trigger: 'blur'}
                    ],
                    label: [
                        {required: true, type: 'array', min: 1, message: '请至少选择一个标签', trigger: 'change'}
                    ],
                    classify: [
                        {required: true, type: 'array', min: 1, message: '请知道选择一个分类', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            handleChange(html, text) {
                console.log(html, text);
                this.article.propContent = text
            },
            changeDisplay(status) {
                status ? this.article.display = 1 : this.article.display = 0
            },
            changeTop(status) {
                status ? this.article.top = 1 : this.article.top = 0
            },
            handleSuccess(response, file) {
                this.article.cover = response.data.url;
                console.log(response);
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar'
                file.name = '7eb99afb9d5f317c912f08b5212fd69a'
            },
            handleError(error, file, fileList) {
                console.log(error);
                console.log(file)
            },
            handleFormatError(file) {
                this.tip(file.name + '的格式不支持')
            },
            handleSubmit(name) {
                console.log(this.checkFormData(name))
                console.log(this.article)
            },
            checkFormData(name) {
                return this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (!this.article.content) {
                            this.$Message.error('请补全文章内容');
                        }
                    } else {
                        this.$Message.error('请补全文章的相关信息');
                    }
                });
            },
            tip(content) {
                this.$Message.warning({
                    content: content,
                    duration: 2
                })
            }
        }
    }
</script>
<style lang="less">
  .w-e-toolbar {
    flex-wrap: wrap !important;
  }

  .my-card {
    .ivu-card-head {
      padding-top: 0 !important;
      padding-bottom: 10px !important;
    }

    .ivu-card-body {
      padding-top: 8px !important;
      padding-bottom: 15px !important;
    }
  }

  .divider {
    margin: 0 !important;

    span {
      line-height: 20px;
      font-size: 14px;
      color: #17233d;
      font-weight: bold;
    }
  }

  .divider-body {
    padding: 10px;
  }

  .ivu-checkbox-group-item {
    margin: 3px !important;
  }

  .my-form-item {
    margin-bottom: 0 !important;

    .ivu-form-item-content {
      margin-left: 0 !important;
    }

    .ivu-form-item-error-tip {
      padding-top: 0 !important;
      position: relative;
      top: -1px;
    }
  }

  .previewImg {
    z-index: 1;
    img {
      max-width: 100%;
      max-height: 92px;
    }
  }
</style>
